import React from 'react';
import { Pie } from '@ant-design/plots';
import { countUserbyDept } from '../../services/userServices';

class PieChart extends React.PureComponent {
  constructor(props) {
    super(props);
    this.initData();
    this.state = {
      config: {
        data: [],
        angleField: 'userCount',
        colorField: 'deptName',
        label: {
          text: 'userCount',
          style: {
            fontWeight: 'bold',
          },
        },
        legend: {
          color: {
            title: false,
            position: 'right',
            rowPadding: 5,
          },
        },
      }
    };
  }

  initData = async () => {
    try {
      const response = await countUserbyDept();
      const { data } = response;
      console.log(data);
      this.setState({
        config: {
          ...this.state.config,
          data: data,
        },
      });
    } catch (error) {
      console.log(error.message || 'Failed to count user');
    }
  }

  render() {
    return (
      <>
        <Pie {...this.state.config} />
      </>
    );
  }
}

export default PieChart;
